<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>登录</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <style type="text/css">
            .login {
                display: flex;
                flex-direction: column;
                width: 500px;
                height: 400px;
                justify-content: space-around;
                align-items: center;
                margin: 0 auto;
            }
            
            form {
                background-color: antiquewhite;
                width: 500px;
                height: 300px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
            }
            .form-item {
                display: flex;
                width: 300px;
                height: 30px;
                justify-content: space-between;
            }
            .loginButton {
                flex-grow: 1;
                background-color: lightgreen;
            }
            .registerButton {
                width: 300px;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="app">
            <div class="login">
                <login-form></login-form>
                <button class="registerButton" @click="register()">注册新账号</button>
            </div>
        </div>
        
        <script type="text/javascript">
            const LoginForm = {
                template: `
                <form @submit="loginForm">
                    <div class="form-item">
                        <label for="email">邮箱</label>
                        <input ref="email" name="email" id="email" type="text"/>
                    </div>
                    <div class="form-item">
                        <label for="password">密码</label>
                        <input ref="password" name="password" id="password" type="text"/>
                    </div>
                    <div class="form-item">
                        <button class="loginButton">登录</button>
                    </div>
                </form>
                `,
                methods: {
                    loginForm(evt) {
                        evt.preventDefault();
                        var emailValue = this.$refs.email.value;
                        var passwordValue = this.$refs.password.value;
                        console.log(this.$refs.email.value);
                        console.log(this.$refs.password.value);
                        var formData = new FormData();
                        formData.append('email', emailValue);
                        formData.append('password', passwordValue);
                        axios.post('http://localhost:80/api/user/login', formData)
                        .then(function(response){
                            var status = response.data.status;
                            var message = response.data.message;
                            console.log(status);
                            console.log(message);
                            if (status != 0) {
                                alert(message);
                            } else {
                                window.location.href='welcome.html';
                            }
                        })
                        .catch(function(error){
                            console.log(error);
                        });
                    }
                }
            };

            new Vue({
                el: '#app',
                components: {
                    'login-form': LoginForm
                },
                methods: {
                    register() {
                        window.location.href='register.html';
                    }
                }
            });
        </script>
    </body>
</html>